export default function PlanCard() {
  return (
    <div>
      <div className="text-[#95a1b8] text-[14px] uppercase mb-[12px]">Plan</div>

      <div className="bg-[#10141f] border-solid border-[#1f2533] rounded-2xl p-[16px] shadow-[0_0_20px_rgba(0,0,0,0.3)]">
        <div className="flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <span className="text-[14px] font-semibold text-white">Kickstart Plan</span>
            <div className="w-2 h-2 bg-[#4ade80] rounded-full"></div>
          </div>
          <p className="text-[13px] text-gray-400">42 of 100 decks this month</p>

          {/* 进度条 */}
          <div className="h-1.5 bg-[#1a1f2b] rounded-full overflow-hidden mt-1">
            <div className="h-full w-[42%] bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8]" />
          </div>

          <div className="mt-[8px] w-[65px] h-[24px] flex items-center justify-center text-[13px] text-white rounded-[12px] bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] shadow-[0_4px_20px_rgba(56,189,248,0.3)] transition-all duration-500 ease-out hover:shadow-[0_6px_30px_rgba(56,189,248,0.5)] hover:-translate-y-[3px] hover:brightness-110 cursor-pointer">
            Upgrade
          </div>
        </div>
      </div>
    </div>
  )
}
